html {margin:0; padding:0;}
body {margin:0; padding:0; height: 100%;font-family:"Microsoft YaHei"; font-size:12px; color:#666; background:black;}
a{color: #999;}
a:hover{color: #fff;}
/*背景*/
.main{height:800px; position: relative;}
.linear{
FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#000,endColorStr=#00002F); 
background: -ms-linear-gradient(top, #000,  #00002F);
background:-moz-linear-gradient(top, #000,#00002F);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#00002F));
background: -webkit-linear-gradient(top, #000, #00002F);
background: -o-linear-gradient(top, #000, #00002F);
}
/*星星*/
.star{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 98;}
.star>div{position: absolute; }
.star>div:nth-child(5n){ width:2px; height: 2px; border-radius: 2px; background:#ddd; -webkit-animation:shine 1s linear 1s infinite; animation:shine 1s linear 1s infinite;}
.star>div:nth-child(5n+1){ width:4px; height: 4px; border-radius: 4px; background:#fff; -webkit-animation:shine 1s linear 2s infinite; animation:shine 1s linear 2s infinite;}
.star>div:nth-child(5n+2){ width:2px; height: 2px; border-radius: 2px; background:#fff; -webkit-animation:shine 1s linear 3s infinite; animation:shine 1s linear 3s infinite;}
.star>div:nth-child(5n+3){ width:4px; height: 4px; border-radius: 4px; background:#fff; -webkit-animation:shine 1s linear 1.5s infinite; animation:shine 1s linear 1.5s infinite;}
.star>div:nth-child(5n+4){ width:1px; height: 1px; border-radius: 2px; background:#fff; -webkit-animation:shine 1s linear 2.5s infinite; animation:shine 1s linear 2.5s infinite;}
.star>div:nth-child(1){top: 20%; left: 80%;}
.star>div:nth-child(2){top: 30%; left: 20%;}
.star>div:nth-child(3){top: 50%; left: 40%;}
.star>div:nth-child(4){top: 70%; left: 50%;}
.star>div:nth-child(5){top: 10%; left: 60%;}
.star>div:nth-child(6){top: 20%; left: 30%;}
.star>div:nth-child(7){top: 30%; left: 10%;}
.star>div:nth-child(8){top: 40%; left: 50%;}
.star>div:nth-child(9){top: 60%; left: 10%;}
.star>div:nth-child(10){top: 10%; left: 50%;}
.star>div:nth-child(11){top: 40%; left: 30%;}
.star>div:nth-child(12){top: 70%; left: 20%;}
.star>div:nth-child(13){top: 20%; left: 40%;}
.star>div:nth-child(14){top: 40%; left: 70%;}
.star>div:nth-child(15){top: 60%; left: 60%;}
.star>div:nth-child(16){top: 20%; left: 40%;}
.star>div:nth-child(17){top: 50%; left: 95%;}
.star>div:nth-child(18){top: 70%; left: 20%;}
.star>div:nth-child(19){top: 20%; left: 40%;}
.star>div:nth-child(20){top: 65%; left: 15%;}
.star>div:nth-child(21){top: 35%; left: 55%;}
.star>div:nth-child(22){top: 75%; left: 65%;}
.star>div:nth-child(23){top: 25%; left: 25%;}
.star>div:nth-child(24){top: 45%; left: 90%;}
.star>div:nth-child(25){top: 25%; left: 75%;}
.star>div:nth-child(26){top: 75%; left: 75%;}
.star>div:nth-child(27){top: 45%; left: 65%;}
.star>div:nth-child(28){top: 25%; left: 35%;}
.star>div:nth-child(29){top: 65%; left: 55%;}
.star>div:nth-child(30){top: 55%; left: 45%;}
.star>div:nth-child(31){top: 75%; left: 75%;}
.star>div:nth-child(32){top: 25%; left: 25%;}
.star>div:nth-child(33){top: 35%; left: 85%;}
.star>div:nth-child(34){top: 35%; left: 45%;}
.star>div:nth-child(35){top: 15%; left: 25%;}
.star>div:nth-child(36){top: 55%; left: 45%;}
.star>div:nth-child(37){top: 75%; left: 55%;}
.star>div:nth-child(38){top: 25%; left: 55%;}
.star>div:nth-child(39){top: 55%; left: 65%;}
.star>div:nth-child(40){top: 65%; left: 25%;}
@-webkit-keyframes shine{0%{opacity:0.5} 100%{opacity: 1}}
@keyframes shine{0%{opacity:0.5} 100%{opacity: 1}}
/*月亮*/
.moon{ position: absolute; top:6%; left: 10% ;width: 200px; height: 200px; border-radius: 200px; background:#fff;z-index: 99 ;}
.shadow{-moz-box-shadow:0 0 100px #fff;  -webkit-box-shadow:0 0 100px #fff;  box-shadow:0 0 100px #fff;}
/*房子*/
.house{ position: absolute;bottom: 0; left: 20%;width:300px; height: 160px; }
.house .roof{position: absolute; top: 0; left: 0; width: 0; height: 0;border-left: 150px solid transparent; border-right: 150px solid transparent;border-bottom: 100px solid black;}
.house .wall{position: absolute; bottom: 0; left:50px; width: 200px; height: 80px; background: black;}
.house .chimney{position: absolute; top: 10px; left:200px; width: 30px; height: 80px; background: black;}
.house .window{position: absolute; top: 100px; left:130px; width: 40px; height: 40px; background: yellow;}
.house .window::before{position: absolute; top: 50%; left: 0 ;content:"";width:40px; height:1px; background:#999;}
.house .window::after{position: absolute; top: 0; left: 50% ;content:"";width:1px; height:40px; background:#999;}